<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            margin: 100px auto;
            width: 400px;

        }
        #prompt {
            font-size: 12px;
            color: darkgray;
        }
        #score {
            border: 1px solid darkgray;
        }
        .right {
            /* 不要又用background-image,不一样呢 */
            background: url(img/right.jpg) no-repeat;
            padding-left: 20px;
            background-size: 15px 15px;
            /* 因为prompt这个是id选择器，权重更高，所以字体颜色显示不了，所以必须通过 !important来提高权重*/
            color: lightgreen !important;
        }
        .error {
            background: url(img/error.jpg) no-repeat;
            padding-left: 20px;
            background-size: 15px 15px;
           color: red !important;
        }
    </style>
</head>
<body>
    <div id="box">
        <label for="score"> 您的成绩：</label>
        <input type="text" placeholder="请输入分数" id="score">
        <span id="prompt" >请输入您的成绩</span>
    </div>
    <script>
        var score=document.getElementById('score');
        var prompt=document.getElementById('prompt');
        score.onblur=function(){
            var value=parseFloat(this.value);//parseFloat是将其转为浮点型，原来是字符串
            // console.log(typeof value);
            if(isNaN(value)){//不是数字
                prompt.innerHTML='输入的成绩不正确';
                // prompt.className='error'这两种方法都可以;
                prompt.setAttribute('class','error');
                score.style.borderColor='red';
            }else if(value>=0&&value<=100){
                prompt.innerHTML='输入成绩正确';
                prompt.className='right';
                score.style.borderColor='lightgreen';
            }else{
                prompt.innerHTML='成绩必须在0-100之间';
                prompt.className='error';
                score.style.borderColor='red';
            }
         
        }
           //input输入框获取焦点恢复原来状态
           score.onfocus=function(){
               prompt.innerHTML='请输入您的成绩';
               prompt.className='';
               score.style.borderColor='darkgray';
               score.style.outline='none';
               score.value='';
                

            }
    </script>
</body>
</html>